/* eslint-disable implicit-arrow-linebreak */
//Third Party
import { useEffect, useState } from 'react'
import DataTable from 'react-data-table-component'
import { ChevronDown } from 'react-feather'
import { useDispatch, useSelector } from 'react-redux'
import { Card, CardBody, CardHeader, CardTitle, Col, Row } from 'reactstrap'

// Components
import FloatingBtn from '../../components/addAppointment/FloatingBtn'
import AppointmentCard from '../../components/appointment/AppointmentCard'
import NotFound from '../../components/not-found'
import CustomPagination from '../../components/pagination/ReactPagination'
import CustomSpinner from '../../components/spinner/Spinner'
import {
  getAllAppointmentsAction,
  getPrevAndNextAppointmentsAction,
  handleLimitChange,
  handlePageChange
} from '../../redux/appointment/appointmentAction'
import useAppointmentData from './hooks/useAppointmentData'
import { columns } from './table.data'

const customStyles = {
  headCells: {
    style: {
      backgroundColor: '#faf6ed',
      borderRight: '2px solid #f1f0ed',
      paddingLeft: '2.2rem !important'
    }
  },
  cells: {
    style: {
      borderRight: '2px solid #f1f0ed',
      paddingLeft: '2.2rem !important'
    }
  }
}
const Appointments = () => {
  const dispatch = useDispatch()
  const [currentPage, setPage] = useState(0)

  const {
    getAllAppointments,
    checkInAppointments,
    loading,
    getPrevAndNextAppointments,
    getLoading
  } = useSelector((state) => state.appointment)
  const rows = getAllAppointments?.data
  const count = getAllAppointments?.count
  const limit = getAllAppointments?.limit
  const offset = getAllAppointments?.offset
  const nextData = getPrevAndNextAppointments?.next_appointment
  const prevData = getPrevAndNextAppointments?.previous_appointment
  const AppointmentData = useAppointmentData({
    prevData,
    nextData,
    checkInAppointments
  })
  useEffect(() => {
    dispatch(getPrevAndNextAppointmentsAction())
    dispatch(getAllAppointmentsAction({ offset, limit: 5 }))
  }, [])

  // ** Changing Limit
  const handleLimit = (newLimit) => {
    dispatch(
      handleLimitChange({
        oldLimit: limit,
        newLimit
      })
    )
    setPage(0)
  }

  // ** Changing page
  const handlePagination = (page) => {
    const newOffset = page.selected * limit
    dispatch(
      handlePageChange({
        offset: newOffset === 0 ? 0 : newOffset,
        limit
      })
    )
    setPage(() => page.selected)
  }

  return (
    <div>
      {/* Appointment Card */}
      <Card className="AppointmentCard margin-bottom-0">
        <CardHeader className="AppointmentHead ">
          <CardTitle className="fw-bold black ">Your Appointments</CardTitle>

          {/* <CardTitle className="AppointmentTitle d-sm-none d-lg-block d-md-block ">
            <Button size="sm" className="request-btn w-100 ">
              Request Appointment
            </Button>
          </CardTitle> */}
        </CardHeader>

        <CardBody className="appointcardBody">
          <Row className="setCards">
            {AppointmentData.map((obj, i) => (
              <Col lg="5" md="6" key={i}>
                <AppointmentCard item={obj} getLoading={getLoading} />
              </Col>
            ))}
          </Row>
          <Row>
            <Col lg="12" className="tableSetting">
              <DataTable
                pagination
                paginationServer
                rowsPerPage={limit}
                progressPending={loading}
                progressComponent={<CustomSpinner />}
                noDataComponent={<NotFound />}
                data={rows}
                pointerOnHover
                highlightOnHover
                theme="solarized"
                customStyles={customStyles}
                columns={columns}
                className="react-dataTable"
                paginationDefaultPage={currentPage}
                sortIcon={<ChevronDown size={10} />}
                paginationComponent={() =>
                  CustomPagination({
                    limit,
                    handleLimit,
                    currentPage,
                    count,
                    handlePagination
                  })
                }
              />
            </Col>
          </Row>
        </CardBody>
      </Card>
      <FloatingBtn />
    </div>
  )
}

export default Appointments
